<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-bar">
			<input class="search-input" type="text" v-model="keyword" placeholder="请输入电站编号/业主姓名/地址"
				confirm-type="search" @confirm="onSearch" />
			<view class="search-btn" @click="onSearch">搜索</view>
		</view>
		<!-- 顶部标签页 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" :class="['tab', activeTab === index ? 'active' : '']"
				@click="switchTab(index)">
				{{ tab.label }}
			</view>
		</view>

		<!-- 电站列表 -->
		<view v-if="orders.length > 0">
			<view v-for="(order, index) in orders" :key="order.id" class="order-card" @click="goToDetail(order.id)">
				<view class="order-header">
					<view class="order-info">
						<text class="address">{{ order.stationno }} - {{ order.guestname }}</text>
						<text class="address">{{ order.addressstring }}</text>
					</view>
					<view class="status-tags">
						<view class="status-tag" :style="{ backgroundColor: getStatusColor(order.locationStatus) }">
							<dict-label dict-type="oper_station_location_status" :value="order.locationStatus" />
						</view>
					</view>
				</view>
				<view class="order-body">
					<text class="reason">⚡ 装机容量：{{ order.totalpower/1000 }}KW</text>
					<text class="time">🕒 创建时间：{{ parseTime(order.createTime) }}</text>
				</view>

				<!-- 底部操作按钮 -->
				<view class="order-footer">
					<view class="action-btn primary" @click.stop="goToDetail(order.id)">
						📍 定位
					</view>
					<view class="action-btn primary" @click.stop="callguest(order.phone)">
						📞 拨打
					</view>
					<view class="action-btn primary" @click.stop="fetchStationCoordinates(order.id)">
						🧭 导航
					</view>
					<!-- 		   <view class="action-btn primary" @click.stop="goToDetail(order.id)" v-if="[1,2].includes(order.status)">
		     <dict-label dict-type="oper_fault_node" :value="order.node" />
		   </view>
		   <view class="action-btn primary" @click.stop="goToDetail(order.id)" v-if="[6].includes(order.status)">
		     重新提交
		   </view> -->
				</view>
			</view>
		</view>

		<!-- 无订单提示 -->
		<view v-else class="no-orders">
			<text>当前页签下暂无订单</text>
		</view>

		<!-- 加载中 -->
		<view class="load-more" v-if="loadingMore">加载中...</view>
	</view>
</template>


<script>
	import * as stationApi from '@/api/oper/station/station.js';
	import {
		parseTime
	} from '@/utils/ruoyi.js';



	export default {
		data() {
			return {
				tabs: [{
						label: '未定位',
						locationStatus: 0
					},
					{
						label: '待审核',
						locationStatus: 2
					},
					{
						label: '已定位',
						locationStatus: 1
					},
					{
						label: '维修中',
						repairStatus: 1
					},
				],
				activeTab: 0,
				orders: [],
				pageNo: 1,
				pageSize: 10,
				loadingMore: false,
				finished: false,
				keyword: '',
			};
		},
		onLoad() {
			this.loadOrders();
		},
		onPullDownRefresh() {
			this.pageNo = 1;
			this.finished = false;
			this.loadOrders();
		},
		onReachBottom() {
			if (!this.finished) {
				this.pageNo++;
				this.loadOrders();
			}
		},
		methods: {
			parseTime,
			switchTab(index) {
				this.activeTab = index;
				this.pageNo = 1;
				this.finished = false;
				this.loadOrders();
			},
			getStatusColor(locationStatus) {
				switch (locationStatus) {
					case 0:
						return '#dc3545'; // 未定位（红色）
					case 1:
						return '#00c851'; // 已定位（绿色）
					case 2:
						return '#007aff'; // 待审核（蓝色）
					default:
						return '#cccccc'; // 默认灰色
				}
			},
			onSearch() {
				this.pageNo = 1;
				this.loadOrders();
				this.finished = false;
			},

			async loadOrders() {
				this.loadingMore = true;
				const locationStatus = this.tabs[this.activeTab].locationStatus;
				const repairStatus = this.tabs[this.activeTab].repairStatus;
				// 替换为实际的 API 请求
				const res = await stationApi.getStationPage({
					locationStatus: locationStatus,
					repairStatus : repairStatus,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					keyword: this.keyword?.trim()
				});
				if (this.pageNo === 1) {
					this.orders = res.data.list;
				} else {
					this.orders = [...this.orders, ...res.data.list];
				}
				this.loadingMore = false;
				if (res.data.length < this.pageSize) {
					this.finished = true;
				}
				uni.stopPullDownRefresh();
			},
			goToDetail(stationId) {
				uni.navigateTo({
					url: `/pages/work/stationNew/detail?stationId=${stationId}`
				});
			},
			callguest(phone) {
				if (!phone || "null" == phone) {
					uni.showToast({
						title: '暂无可拨打电话',
						icon: 'none'
					});
					return;
				}
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},

			async fetchStationCoordinates(stationId) {
				const res = await stationApi.getStation(stationId);
				uni.openLocation({
					latitude: Number(res.data.latitude),
					longitude: Number(res.data.longitude),
					name: res.data.name,
					address: res.data.addressstring,
					scale: 18
				});
			},



			handleAction(order) {
				// 你可以打开一个处理页面或者弹窗
				uni.showToast({
					title: `处理订单 ${order.id}`,
					icon: 'none'
				});
			},
		},
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.search-bar {
		display: flex;
		background-color: #fff;
		padding: 10rpx 20rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.search-input {
		flex: 1;
		height: 64rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 32rpx;
		font-size: 28rpx;
		background-color: #f9f9f9;
	}

	.search-btn {
		margin-left: 20rpx;
		background-color: #007aff;
		color: #fff;
		padding: 0 30rpx;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 10rpx 0;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 16rpx 0;
		font-weight: bold;
		color: #666;
		border-bottom: 4rpx solid transparent;
		transition: all 0.3s;
	}

	.tab.active {
		color: #007aff;
		border-color: #007aff;
	}

	.order-card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 10rpx;
		/* 可选 */
	}

	.order-info {
		max-width: 75%;
		/* 防止地址占据整行空间 */
		display: flex;
		flex-direction: column;
	}

	.address {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		/* 可选 */
	}

	.status-tags {
		display: flex;
		gap: 10rpx;
		/* 标签之间的间距 */
		margin-left: 10rpx;
		/* 与左侧内容的间距 */
		align-items: center;
	}

	.status-tag {
		font-size: 24rpx;
		color: #fff;
		padding: 6rpx 14rpx;
		border-radius: 12rpx;
		white-space: nowrap;
		/* 防止标签文字换行 */
	}

	.order-body text {
		display: block;
		margin-bottom: 10rpx;
		color: #666;
		font-size: 26rpx;
	}

	.no-orders {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		margin-top: 100rpx;
	}

	.empty-img {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.load-more {
		text-align: center;
		color: #999;
		padding: 30rpx 0;
		font-size: 26rpx;
	}

	.order-footer {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		margin-top: 24rpx;
	}

	.action-btn {
		padding: 14rpx 28rpx;
		font-size: 26rpx;
		border-radius: 32rpx;
		text-align: center;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		transition: all 0.15s ease;
		user-select: none;
	}

	.action-btn:active {
		transform: scale(0.96);
		opacity: 0.85;
	}

	.action-btn.primary {
		background-color: #007aff;
		color: #fff;
	}

	.action-btn.plain {
		background-color: #f6f7f9;
		color: #333;
		border: 1rpx solid #ddd;
	}
</style>